<script setup lang="ts">
import Explanation from "./components/Explanation.vue"

import {ref} from "vue"
  let path =ref("../public/image1.jpg")
  let name =ref("矢量图柿子")
function change() {
  if(name.value === "矢量图柿子"){
    path.value ="../public/image2.png"
    name.value = "拟人柿子"
  }else{
    path.value ="../public/image1.jpg"
    name.value = "矢量图柿子"
  }
}
</script>

<template>
   <div id="body">
    <h1>柿子展示大全</h1>
    <Explanation></Explanation>
    <img :src="path" alt="柿子图片" />
    <p>{{ name}}</p>
    <button @click="change">切换</button>
  </div>
</template>

<style scoped>
#body {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>
